<template>
    <div>
        <el-dialog title="设置商品" v-model="props.visible" :before-close="beforeClose">
            <el-form abel-width="100px" width="400px">
                <!-- <el-form :model="ownForm" label-width="100px"> -->
                <el-form-item label="排序 :">
                    <el-input style="width: 250px;" v-model="ownForm.sort"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="onCancel">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, defineProps, defineEmits, withDefaults } from 'vue';
import type { Ref } from 'vue';
// 数据约束

let originForm = ref({}) as any
let ownForm = ref({}) as any
// 自定义事件
let emits = defineEmits<{
    (event: "cancel"): void;
    (event: "confirm", row: any): void
}>()

// 监听数据变化
watch(() => props.form, (newVal) => {
    ownForm.value = {
        id: newVal.id,
        sort: newVal.sort
    }
    // console.log(ownForm.value);

})

// 关闭弹出框的回调
let beforeClose = () => {
    onCancel()
}
// 取消
let onCancel = () => {
    emits("cancel")
}

// 确定
let onConfirm = () => {
    emits('confirm', ownForm.value)
    onCancel()
}
// 接收父组件数据
let props = withDefaults(
    defineProps<{
        visible: boolean;
        form: {
            id: number;
            sort: number;
        }
    }>(), {
    visible: true,
})
// console.log(props.form);


</script>

<style scoped lang="scss"></style>